<template>
  <!--文字驱动-->
  <line-item ref="lineItemRef" class="text-drive-line" :timeline-item="timelineItem">
    <template v-for="(item, index) in sliderArr" :slot="index">
      <div class="text-driver-content columns">
        <canvas id="text-content" ref="canvasTextRef"></canvas>
        <div id="text-driver" ref="canvasRef"></div>
      </div>
    </template>
  </line-item>
</template>

<script>
import multiMixins1 from '@veditor/components/timeLine/js/multiTrackNew';
export default {
  name: 'TextDrive',
  mixins: [multiMixins1],
  methods: {
    // 处理绘制文本的数据
    async renderTextCanvas() {
      const { timelineItem } = this;
      const { sliderArr } = timelineItem;
      for (let i = 0; i < sliderArr.length; i++) {
        const item = sliderArr[i];
        if (this.$refs.canvasTextRef) {
          const { offsetWidth: width, offsetHeight: height } = this.$refs.canvasTextRef[i];
          if (width > 0) {
            timelineItem.calcTextPosition(item, width);
            Object.assign(item, { width, height });
            continue;
          }
        }
        return;
      }
      return this.renderTextCanvasWorker(sliderArr);
    },
  },
};
</script>

<style lang="stylus">
.text-drive-line
  .line-item
    background-color #22574c
    color #00866c
    .text-driver-content
      height 100%
      justify-content flex-start
      align-items unset !important
      flex-direction column
      #text-content
        width 100%
        height 13px
        min-width 4px
      #text-driver
        width 100%
        height 13px
        min-width 4px
    .columns
      display flex
      padding 0 4px
      align-items flex-end
      .content-item
        flex 1
        width 2px
        margin-left 1px
        background linear-gradient(to top, #22785f 0, #22785f 18px, #AB973C 18px, #ab973c 30px, #b64b43 30px, #b64b43 38px)
        min-height 2px
        &:last-child
          margin-left unset
</style>
